<template>
  <el-card v-loading="loading">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="生成代码配置" name="genInfo">
        <genInfoForm ref="genInfo" :form="info" :menus="menus" />
      </el-tab-pane>
      <el-tab-pane label="字段配置" name="cloum">
        <el-table ref="dragTable" :data="cloumns" align="center" stripe border fit highlight-current-row
          row-key="columnId" :max-height="tableHeight">
          <el-table-column align="center" fixed label="序号" type="index" width="50" />
          <el-table-column align="center" fixed label="字段列名" prop="columnName" width="150" :show-overflow-tooltip="true" />
          <el-table-column align="center" fixed label="字段描述" width="150">
            <template slot-scope="{row}">
              <el-input v-model="row.columnComment"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="字段类型" prop="columnType" width="120" :show-overflow-tooltip="true" />
          <el-table-column align="center" label="Java类型" width="120">
            <template slot-scope="{row}">
              <lam-select v-model="row.javaType" :list="javaTypeOptions"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="java字段长度" width="100">
            <template slot-scope="{row}">
              <el-input v-model="row.javaLength"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="java属性" width="150">
            <template slot-scope="{row}">
              <el-input v-model="row.javaField"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="java属性描述" width="150">
            <template slot-scope="{row}">
              <el-input v-model="row.javaFieldDesc"></el-input>
            </template>
          </el-table-column>

          <el-table-column align="center" label="必填" width="60">
            <template slot-scope="{row}">
              <el-checkbox :true-label="1" :false-label="0" v-model="row.isRequired"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column align="center" label="编辑字段" width="80">
            <template slot-scope="{row}">
              <el-checkbox :true-label="1" :false-label="0" v-model="row.isEdit"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column align="center" label="列表" width="60">
            <template slot-scope="{row}">
              <el-checkbox :true-label="1" :false-label="0" v-model="row.isList"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column align="center" label="查询" width="60">
            <template slot-scope="{row}">
              <el-checkbox :true-label="1" :false-label="0" v-model="row.isQuery"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column align="center" label="查询方式" width="130">
            <template slot-scope="{row}">
              <lam-select v-model="row.queryType" :list="queryTypeOptions" :disabled="!row.isQuery"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="界面表单项名称" width="150">
            <template slot-scope="{row}">
              <el-input v-model="row.formItemLabel"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="界面控件" width="200">
            <template slot-scope="{row}">
              <lam-select v-model="row.htmlType" :list="htmlTypeOptions"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="新增字典" width="220">
            <template slot-scope="{row}">
              <el-input v-model="row.dictText" clearable ></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="选择字典" width="300">
            <template slot-scope="{row}">
              <lam-select v-model="row.dictCode" :list="dictOptions" :filterable="true" />
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-form label-width="100px">
      <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="close()">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
  import { httpGet, httpPut } from "@/api";
  import { menuTreeSelect } from "@/api/system/menu";
  import genInfoForm from "./genInfoForm";

  export default {
    name: "GenEdit",
    components: {
      genInfoForm
    },
    data() {
      return {
        loading: false,
        // 选中选项卡的 name
        activeName: "genInfo",
        // 表格的高度
        tableHeight: document.documentElement.scrollHeight - 265 + "px",
        // 表列信息
        cloumns: [],
        // 字典信息
        dictOptions: [],
        // 筛选类型信息
        queryTypeOptions: [],
        //控件类型数据
        htmlTypeOptions: [],
        //java类型数据
        javaTypeOptions: [],
        // 菜单信息
        menus: [],
        // 表详细信息
        info: {},
        url:{
          base: '/tool/gen/',
        }
      };
    },
    created() {
      const tableId = this.$route.params && this.$route.params.tableId;
      if (tableId) {
        this.getData(tableId)
      }

      /** 查询菜单下拉列表 */
      menuTreeSelect({menuType: 0}).then(response => {
        this.menus = response.data;
      });

      this.$getDictItems("query_type").then(data => {
        this.queryTypeOptions = data;
      });
      this.$getDictItems("html_type").then(data => {
        this.htmlTypeOptions = data;
      });
      this.$getDictItems("java_type").then(data => {
        this.javaTypeOptions = data;
      });
      /** 查询字典下拉列表 */
      this.$getDictItems("dictOptions", 'tableDict').then(data => {
        let newData = [];
        if(data && data.length){
          data.forEach(item=>{
            newData.push({ value: item.value, text: item.text + ' ' + item.value });
          })
        }
        this.dictOptions = newData;
      });
    },
    methods: {
      getData(tableId){
        this.loading = true;
        httpGet(this.url.base + tableId).then(res => {
          this.cloumns = res.data.columns;
          delete res.data['columns'];
          this.info = res.data;
          Object.assign(this.info, this.info.optionObject)
          // Object.assign(this.info, this.info.codeModule)
        }).finally(() => {
          this.loading = false;
        });
      },

      /** 提交按钮 */
      submitForm() {
        const genForm = this.$refs.genInfo.$refs.genInfoForm;
        Promise.all([genForm].map(this.getFormPromise)).then(res => {
          const validateResult = res.every(item => !!item);
          if (!validateResult) {
            this.msgError("表单校验未通过，请重新检查提交内容");
            return;
          }
          const genTable = Object.assign({}, genForm.model);
          genTable.columns = this.cloumns;
          genTable.optionObject = {
            treeCode: genTable.treeCode,
            treeName: genTable.treeName,
            treeParentCode: genTable.treeParentCode,
            parentMenuId: genTable.parentMenuId,
            uniqueField: genTable.uniqueField,
            uniqueQueryField: genTable.uniqueQueryField,
            uniqueConditionField: genTable.uniqueConditionField
          };
          genTable.extConfig = {
            moduleShort: genTable.moduleShort,
            packageName: genTable.packageName,
            uiPath: genTable.uiPath
          }
          this.loading = true;
          httpPut(this.url.base, genTable).then(res => {
            this.msgSuccess(res.msg);
            this.close();
          }).finally(() => {
            this.loading = false;
          });
        });
      },
      getFormPromise(form) {
        return new Promise(resolve => {
          form.validate(res => {
            resolve(res);
          });
        });
      },
      /** 关闭按钮 */
      close() {
        this.$store.dispatch("tagsView/delView", this.$route);
        this.$router.push({
          path: "/tool/gen",
          query: {t: Date.now()}
        })
      }
    },
  };
</script>
